<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜗牛商城后台管理系统</title>
</head>
<body>
	<!-- 标题栏 -->
	<jsp:include page="header.jsp"></jsp:include>
	<!-- 导航栏 -->
	<jsp:include page="navbar.jsp"></jsp:include>
	<!-- 数据展示 -->
	<div class="col-md-10 text-center panel" id="view">
		<!-- 展示操作路径 -->
		<div class="panel-heading text-left">
			<a href="welcome.jsp">商城管理</a>-><a href="javascript:void(0)">订单管理</a>
		</div>
		<!-- 面板主体 -->
		<div class="panel-body">
			<!-- 表格 -->
			<table class="table table-bordered table-hover table-striped">
				<!-- 表头 -->
				<thead>
					<tr>
						<th class="text-center" style="vertical-align: middle">序号</th>
						<th class="text-center" style="vertical-align: middle">订单号</th>
						<th class="text-center" style="vertical-align: middle">下单时间</th>
						<th class="text-center" style="vertical-align: middle"><select
							name="ostate" id="ostate" class="form-control"
							onchange="goPage()">
								<option value="0">所有订单</option>
								<option value="3">已付款未发货</option>
								<option value="4">已发货未收货</option>
								<option value="5">订单完成</option>
						</select></th>
						<th class="text-center" style="vertical-align: middle">下单账号</th>
						<th class="text-center" style="vertical-align: middle">操作</th>
					</tr>
				</thead>
				<!-- 表格主体 -->
				<tbody id="orderFormTB">

				</tbody>
				<tfoot id="pageNav">

				</tfoot>
			</table>
		</div>
		<!-- 新增按钮 -->
		<div class="panel-footer">
		</div>
	</div>
	<!-- 版权 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
<script src="../js/dateFormat.js"></script>
<script type="text/html" id="orderFormTable">
{{each orderFormes orderForm}}
{{if orderForm.ostate>2}}
	<tr>
		<td style="vertical-align:middle">{{$index+1}}</td>
		<td style="vertical-align:middle">{{orderForm.ono}}</td>
		<td style="vertical-align:middle">{{orderForm.odate | dateFormat:'yyyy-MM-dd'}}</td>
		<td style="vertical-align:middle">
			{{if orderForm.ostate==3}}
				已付款未发货
			{{else if orderForm.ostate==4}}
				已发货未收货
			{{else if orderForm.ostate==5}}
				订单完成
			{{else if orderForm.ostate==6}}
				订单异常
			{{/if}}
		</td>
		<td class="text-center" style="vertical-align: middle">{{orderForm.uaccount}}</td>
		<td style="vertical-align:middle">
			{{if orderForm.ostate==3}}
				<button class="btn btn-sm btn-success" onclick="deliver({{orderForm.oid}})">确认发货</button>
			{{/if}}
			<button class="btn btn-sm btn-primary" onclick="showInfo({{orderForm.oid}})">查看详情</button>
		</td>
	</tr>
{{/if}}
{{/each}}
</script>
<script type="text/html" id="pageBtn">
	<tr>
		<td style="vertical-align:middle" colspan="7">
		<!-- 分页操作按键 -->
			<button class="btn btn-xs btn-primary" onclick="goPage(1)">首页</button>
			<button class="btn btn-xs btn-primary" onclick="goPage({{page==1?1:page-1}})">上一页</button>
			<button class="btn btn-xs btn-primary" onclick="goPage({{page==totalPage?totalPage:page+1}})">下一页</button>
			<button class="btn btn-xs btn-primary" onclick="goPage({{totalPage}})">末页</button>
			<br> <span>共{{totalPage}}页，现在是第{{page}}页。</span>
		</td>
	</tr>	
</script>
<script type="text/javascript">
	let nowPage = 1;

	$(document).ready(function() {
		goPage(nowPage);
	})

	//根据页码返回数据;
	function goPage(page) {
		if (page == null || page < 1) {
			page = nowPage;
		}
		nowPage = page;
		$.ajax({
			url : "../orderForm",
			type : "post",
			data : {
				"opr" : "findValidByPage",
				"page" : page,
				"ostate" : $("#ostate").val()
			},
			dataType : "JSON",
			success : function(result) {
				if (result.msg == "ok") {
					//生成表格
					let orderFormHtml = template("orderFormTable", {
						orderFormes : result.list
					});
					$("#orderFormTB").html(orderFormHtml);

					// 通过模板生成分页按键表					
					let pageBtnHtml = template("pageBtn", {
						page : result.pageBean.page,
						totalPage : result.pageBean.totalPage
					});
					$("#pageNav").html(pageBtnHtml);
				} else if (result.msg == "null") {
					alert("请重新登录！");
					location.href = "login.jsp";
				} else {
					alert(result.msg);
				}
			}
		})
	}

	//发货
	function deliver(oid) {
		$.ajax({
			url : "../orderForm",
			method : "post",
			data : {
				"opr" : "deliver",
				"oid" : oid
			},
			dataType : "JSON",
			success : function(result) {
				if (result.msg == "ok") {
					alert("发货成功！");
					goPage(nowPage);
				} else if (result.msg == "null") {
					alert("请重新登录！");
					location.href = "login.jsp";
				} else {
					alert(result.msg);
				}
			}
		})
	}
	
	//展示商品详情
	function showInfo(oid) {
		if ("${loginUser.urole}" == "" || "${loginUser.urole}" == 3) {
			alert("请登录管理员用户账号！");
			location.href = "login.jsp";
			return;
		}
		$.ajax({
			url : "../orderInfo",
			type : "post",
			data : {
				"opr" : "showInfo",
				"oid" : oid
			},
			dataType : "JSON",
			success : function(result) {
				if (result.msg == "ok") {
					location.href = "orderInfoView.jsp";
				} else if (result.msg == "null") {
					alert("请登录管理员用户账号！");
					location.href = "login.jsp";
				} else {
					alert(result.msg);
				}
			}
		})
	}
</script>
</html>
